import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home'
import Category from './Category'

// 引入路由相关的hooks
import { useHistory } from 'react-router-dom'

const MyIndex = () => {
    const his = useHistory(); // 相当于 类组件中的this.props.history
    // console.log('his', his);
    // 定义跳转函数
    const gotopage = (url) => {
        console.log(url);
        //  his.push(url)
        // 路由传参
        his.push({
            pathname: url,
            search: 'name=任正非&age=70'
        })
    }

    return (
        <div>
            {/* 这是导航部分 */}
            <p>
                <span onClick={() => gotopage('/home')}>首页</span>
                <span onClick={() => gotopage('/category/100')}>分类</span>
                {/* <span onClick={() => gotopage('/cat')}>购物车</span>
                <span onClick={() => gotopage('/mine')}>我的</span> */}
            </p>

            {/* 路由坑部分 */}
            <Route path='/home' component={Home}></Route>
            <Route path='/category/:id' component={Category}></Route>
            {/* <Route path='/cat' component={Cat}></Route>
            <Route path='/mine' component={Mine}></Route> */}
        </div>
    );
}

export default MyIndex;
